<template>
	<view class="box">
		<!-- 车型 -->
		<uni-card>
			<view class="carBox">
				<view class="carBox-img">
					<image class="carImg" :src="orderInfo.url | mmvImageUrl" mode="aspectFill"></image>
				</view>
				<view class="carInfo">
					<view class="btn">{{orderInfo.carNo}}</view>
					<view class="carModel">{{ orderInfo.modelName }}</view>
				</view>
			</view>
		</uni-card>	
		<view class="carBox1" style="padding-bottom: 60px;">
			<u--form class="item" label-width="100" labelPosition="left" :model="form" :rules="rules" ref="uForm">
				<u-form-item label="车辆油量:" prop="fuelCapacity" required ref="fuelCapacity">
					<view v-if="control=='0'">
						<view style="width: 85%;display: inline-block;">
							<u-slider style="width: 340rpx;" disabled v-model="form.fuelCapacity" min="0" :max="16"></u-slider>
						</view>
						<view style="width: 10%;display: inline-block;">
							<text >{{ form.fuelCapacity }}/16</text>
						</view>
					</view>
					<view v-if="control=='1'">
						<text v-if="form.fuelType=='0'">{{ form.fuelCapacity }} 升</text>
						<text v-if="form.fuelType=='1'">{{ form.fuelCapacity }} %</text>
					</view>
				</u-form-item>
				<u-form-item label="车辆公里数:" prop="vehicleMileage" required ref="vehicleMileage">
					<u--input v-model="form.vehicleMileage" disabled type="number" placeholder="请填写车辆公里数"></u--input>
				</u-form-item>
				<u-form-item label="验车时间:" prop="takeAlsoTime" required ref="takeAlsoTime">
					<uni-datetime-picker type="datetime" disabled v-model="form.takeAlsoTime" />
				</u-form-item>
				<u-form-item label="随车物品:" prop="accessoryItems" ref="accessoryItems" style="word-break: break-all;">
					<view style="width: 220px;">
						<u-checkbox-group name="accessoryItems" v-model="accessoryItems" @change="checkAccessories" style="width:220px;flex-wrap: wrap;">
							<u-checkbox size="20" activeColor="#009CF9" v-for="(item, index) in carAccessoriesList" :label="item.text"
								:name="item.value" :key="index"></u-checkbox>
						</u-checkbox-group>
					</view>	
				</u-form-item>
		
				<u-form-item label="其他描述:" prop="remark" ref="remark">
					<u--textarea v-model="form.remark" count maxlength="200" placeholder="请输入说明"></u--textarea>
				</u-form-item>
		
				<view class="text-line"><text class="text-name">车身照片</text></view>
				<view class="text-line"><sr-upload maxCount="10" @uploadResult="bodyImageChange"></sr-upload></view>
		
				<view class="text-line"><text class="text-name">仪表盘/油表</text></view>
				<view class="text-line"><sr-upload maxCount="10" @uploadResult="panelImageChange"></sr-upload></view>
		
				<view class="text-line"><text class="text-name">内饰照片</text></view>
				<view class="text-line"><sr-upload maxCount="10" @uploadResult="interiorImageChange"></sr-upload></view>
		
				<view class="text-line"><text class="text-name">车辆划痕</text></view>
				<view class="text-line"><sr-upload maxCount="10" @uploadResult="scratchImageChange"></sr-upload></view>
		
				<view class="signImage-box">
					<u-form-item label="客户签名:" prop="signImage" ref="signImage">
						<image :src="signImage" @click="test"
							style="height: 50px;width: 100%;border: 0.5px #dadbde solid;border-radius: 5px;"></image>
					</u-form-item>
				</view>
			</u--form>
		</view>
		<view class="bottomView">
			<view class="btn" style="border: 1rpx solid #1673ff;color: #1673ff;background-color: #fff;"
			<view class="btn" @click="saveSubmit()">提交</view>
		</view>
	</view>
</template>

<script>
	import { constant } from 'lodash';
	import {
		orderShortInfo,
		shortCancelOrder,
		shortRefundOrder,
		shortAgainPayOrder,
		liquidatedDamages,
		carOilQuantity,
		car_accessories,
		handoverCar
	} from '@/api/order-api.js';
	import srUpload from '@/components/upload/sr-upload.vue';
	import settings from '@/settings.js'
	export default {
		components: {
			srUpload
		},
		data() {
			return {
				control:0, // 是否是车钥匙
				signImage:'',
				carAccessoriesList: [],
				orderInfo: {
					
				},
				accessoryItems: [],
				form: {
					orderNo: '', //订单编号   必传
					type: 2, //类型(1交车验车,2还车验车)   必传
					fuelCapacity: 0, //车辆油量
					vehicleMileage: 0, //公里数
					accessoryItems: '', //车辆随车物品(逗号隔开)
					remark: '', //其他描述
					takeAlsoTime: this.parseTime(new Date()), //取还车时间
					lkosten: '', //补充油费(还车验车)
					bodyImage: [], //车身照片
					panelImage: [], //仪表盘
					interiorImage: [], //内饰照片
					scratchImage: [], //车辆划痕
					signImage: [], //客户签名
				
				},
				rules: {
					vehicleMileage: {
						type: 'number',
						required: true,
						message: '请填写车辆公里数',
						trigger: ['blur', 'change']
					},
					takeAlsoTime: {
						type: 'string',
						min: 2,
						required: true,
						message: '请选择验车时间',
						trigger: ['blur', 'change']
					},

				},
				isVehicleKey:false

			};
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		computed: {
			signImage:{
				get(){
					console.log(signImage)
				}
			}
		},
		onLoad(op) {
			this.orderNo = op.orderNo;
			this.type = op.type;
			this.control = op.control
			this.getOrderDetail();
			this.carAccessories();
			uni.$on("singImg", (data) => {
				console.log(data,'data')
				this.signImage = data.url
				let arr = [];
				arr.push(data.saveUrl);
				this.form.signImage = arr
			})
		},
		methods: {
			carAccessories() {
				car_accessories().then(res => {
					console.log(res,'carAccessoriesListcarAccessoriesList')
					res.data.map(item => {
						this.carAccessoriesList.push({
							value: item.dictValue,
							text: item.dictLabel
						});
					});
				});
			},
			carOilQuantity(){
				carOilQuantity(this.orderInfo.carId).then((res)=>{
					if(res.data){
						this.isVehicleKey=true
						this.form.fuelCapacity = res.data.fuelLevel
						this.form.vehicleMileage = res.data.mileage
						this.form.fuelType = res.data.fuelType
					}else{
						this.isVehicleKey=false
					}
				})
			},
			test() {
				console.log(111111111)
				uni.navigateTo({
					url: './sign/sign'
				});
			},
			// 保存
			saveSubmit(type) {
				this.$refs.uForm
					.validate()
					.then(res => {
						this.loading = true 
						const info={
							saveType:1,
							orderNo:this.orderInfo.orderNo,
							type:1,
							carId:this.orderInfo.carId,	
						}
						let param = {...this.form,...info}
						// if(param.fuelType==0){
						// 	param.fuelCapacity = param.fuelCapacity + '升'
						// }
						// if(param.fuelType==1){
						// 	param.fuelCapacity = param.fuelCapacity + '%'
						// }
						console.log(param)
						handoverCar(param).then((res)=>{
							if(res.code==200){
								uni.redirectTo({
									url: './shortOrder-list'
								})
							}
						})
					})	
			},
			// 随车物品勾选
			checkAccessories(val) {
				if (val && val.length > 0) {
					let arr = [];
					this.carAccessoriesList.forEach(item => {
						if (val.indexOf(item.value) > -1) {
							arr.push(item.text);
						}
					});
					this.form.accessoryItems = arr.join(',');
				} else {
					this.accessoryItems = '';
				}	
			},
			bodyImageChange(data) {
				this.form.bodyImage = data;
			},
			panelImageChange(data) {
				this.form.panelImage = data;
			},
			interiorImageChange(data) {
				this.form.interiorImage = data;
			},
			scratchImageChange(data) {
				this.form.scratchImage = data;
			},
			// 获取车辆信息
			getOrderDetail() {
				uni.showLoading({
					title: '加载中...'
				});
				orderShortInfo({
					type: this.type,
					orderNo: this.orderNo,
					lat: this.$store.state.user.lat,
					lon: this.$store.state.user.lng
				}).then(res => {
					uni.hideLoading();
					this.orderInfo = res.data;
					if(res.data.carId){
						this.carOilQuantity()
					}
					
				});
			},
			// 日期格式化
			parseTime(time, pattern) {
				if (arguments.length === 0 || !time) {
					return null;
				}
				const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}';
				let date;
				if (typeof time === 'object') {
					date = time;
				} else {
					if (typeof time === 'string' && /^[0-9]+$/.test(time)) {
						time = parseInt(time);
					} else if (typeof time === 'string') {
						time = time
							.replace(new RegExp(/-/gm), '/')
							.replace('T', ' ')
							.replace(new RegExp(/\.[\d]{3}/gm), '');
					}
					if (typeof time === 'number' && time.toString().length === 10) {
						time = time * 1000;
					}
					date = new Date(time);
				}
				const formatObj = {
					y: date.getFullYear(),
					m: date.getMonth() + 1,
					d: date.getDate(),
					h: date.getHours(),
					i: date.getMinutes(),
					s: date.getSeconds(),
					a: date.getDay()
				};
				const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
					let value = formatObj[key];
					// Note: getDay() returns 0 on Sunday
					if (key === 'a') {
						return ['日', '一', '二', '三', '四', '五', '六'][value];
					}
					if (result.length > 0 && value < 10) {
						value = '0' + value;
					}
					return value || 0;
				});
				return time_str;
			}
			
		}
	};
</script>

<style lang="scss" scoped>
	@import '@/style/helang-table.scss';
	/deep/ .u-checkbox-group--row{
		flex-wrap: wrap;
		justify-content: space-between;
	}
	/deep/ .u-checkbox-label--left{
		margin-bottom: 8px;
	}
	.box{
		width: 100%;
		background-color:#F2F8FF ;
		.carBox{
			margin:20rpx;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			padding:15px 10px;
			.carBox-img{
				width: 35%;
				border-radius: 5px;
				.carImg{
					display: inline-block;
					width: 100%;
					height: 80px;
				};
			}
			.carInfo{
				width: 60%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				.btn{
					width:90px;
					text-align: center;
					border: 1px solid #95CAFF;
					color: #95CAFF;
					padding:3px;
					font-size: 14px;
				}
				.carModel{
					font-size: 16px;
				}
			}
		}
		.carBox1{
			width:90%;
			margin:20rpx;
			background-color: #fff;
			padding:15px 10px;
			.text-name{
				font-size:15px ;
				color:#000
			}
		}
	}
	.bottomView {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 120rpx;
		padding: 0 44rpx;
		background-color: #FFFFFF;
		.btn {
			margin:0 auto;
			height: 88rpx;
			width: 312rpx;
			line-height: 88rpx;
			text-align: center;
			border-radius: 44rpx;
			background-color: #1673FF;
			font-size: 32rpx;
			color: #fff;
		}
	}
	
</style>